<template>
	<div class="system-dept-dialog-container">
		<el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" width="769px">
			<el-form ref="deptDialogFormRef" :model="form" size="default" label-width="90px">
				<el-row :gutter="35">
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
						<el-form-item label="作业名称">
							<template #label>
								<el-tooltip effect="dark" placement="top-start">
									<span>作业名称</span>
								</el-tooltip>
							</template>
							<el-input v-model="form.name" placeholder="请输入学生学号" clearable></el-input>
						</el-form-item>
						<el-form-item  label="发布日期" >
							<div class="block">
								<el-date-picker v-model="form.starttime"  style="width: 607px" type="datetime" placeholder="Select date and time" />
							</div>
						</el-form-item>
						<el-form-item  label="结束日期" >
							<div class="block">
								<el-date-picker v-model="form.endtime"   style="width: 607px" type="datetime" placeholder="Select date and time" />
							</div>
						</el-form-item>

						<el-form-item label="作业要求">
							<el-input v-model="form.content" type="textarea" placeholder="请输入作业要求" maxlength="150"></el-input>
						</el-form-item>

				</el-col>
				</el-row>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="onCancel(form)" size="default">取 消</el-button>
					<el-button type="primary" @click="onSubmit(form)" size="default">确定</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script setup lang="ts" name="systemDeptDialog">
import { reactive, ref } from 'vue';
import { homeworkApi } from '/@/api/homework';
import { ElMessage } from 'element-plus';

// 定义子组件向父组件传值/事件
const emit = defineEmits(['refresh']);

// 定义变量内容
const deptDialogFormRef = ref();
const state = reactive({
	ruleForm: {
		name: '',
		starttime: [],
		endtime: [],
		content: '',
		deptLevel: [] as string[], // 上级部门
		deptName: '', // 部门名称
		person: '', // 负责人
		phone: '', // 手机号
		email: '', // 邮箱
		sort: 0, // 排序
		status: true, // 部门状态
		describe: '', // 部门描述
	},
	deptData: [] as DeptTreeType[], // 部门数据
	dialog: {
		isShowDialog: false,
		type: '',
		title: '',
		submitTxt: '',
	},
});
const form = reactive({
	hid:0,
	name:'',
	starttime:'',
	endtime:'',
	content:'',
})

// 打开弹窗
const openDialog = (type: string, row?:any) => {
	if (type === 'edit') {
		das();
		state.ruleForm = JSON.parse(JSON.stringify(row));
		state.dialog.title = '修改作业';
		state.dialog.submitTxt = '修 改';
	} else {
		state.dialog.title = '新增作业';
		state.dialog.submitTxt = '新 增';
	}
	state.dialog.type = type;
	state.dialog.isShowDialog = true;
};
// 关闭弹窗
const closeDialog = () => {
	state.dialog.isShowDialog = false;
};

//格式化后端返回来的时间
function das(){
	const a = JSON.parse(localStorage.getItem('data') || '{}');
	console.log(a)
	form.hid=a.hid
	form.name=a.name
	form.starttime = getLocalTime(a.starttime);
	form.endtime =getLocalTime(a.endtime);
	form.content = a.content
}

// 取消
function onCancel(form:any) {
	form.name=null;
	form.starttime=null;
	form.endtime=null;
	form.content=null;
	closeDialog();
}

// 添加和修改提交
const onSubmit = async (form:any) => {
	console.log(form)
	if(form.hid!=0){
		const a=form.starttime.split('-');
		const b=form.endtime.split('-');
	for(let i=0;i<a.length;i++){
		state.ruleForm.starttime[i] == a[i];
		form.starttime=state.ruleForm.starttime;
	}
	for(let i=0;i<b.length;i++){
		state.ruleForm.endtime[i] == b[i];
		form.endtime=state.ruleForm.endtime;
	}
	}
	homeworkApi().save(form).then((res)=>{
		if(res.code===1){
			ElMessage.success('成功')
		}else{
			deptDialogFormRef.value?.validate().catch((err: any)=>{
					ElMessage.error('表单校验失败...') 
					throw err})
		}
	})
	form=null;
	state.dialog.isShowDialog=false;
	closeDialog();
	// location.reload()
};

function getLocalTime(value: any) {
	let time = value[0] + '-' + value[1] + '-' + value[2];
	return time;
}
// function getLocalTime1(value: any) {
// 	let time =
// 		value.endtime[0] +
// 		'-' +
// 		value.endtime[1] +
// 		'-' +
// 		value.endtime[2] +
// 		' ' +
// 		value.endtime[3] +
// 		':' +
// 		value.endtime[4] +
// 		':' +
// 		value.endtime[5];
// 	return time;
// }

// 暴露变量
defineExpose({
	openDialog,
});
</script>
